<template>
	<div class="component-item">
		<div class="goods-list"
			 :style="{'background': item.bgColor, 'padding-left': item.bgMargin + 'px', 'padding-right': item.bgMargin + 'px'}">
			<div :class="[item.lineNum == 1 ? 'goods-item1' : item.lineNum == 2 ? 'goods-item2' : 'goods-item3']"
				 v-for="item2 in goodsList" :key="item2.id"
				 :style="{'border-radius' : item.bgStyle == 'circle' ? '10px' : ''}" @click="navToDetailPage(item2)">
				<div class="goods-img">
					<img :src="item2.slider_image" mode="widthFix" />
				</div>
				<div class="goods-info">
					<div class="goods-title" v-if="item.show_title == 1">
						{{ item2.name }}
					</div>
					<div class="old-price" v-if="item.show_origin_price == 1">￥ {{item2.original_price }}
					</div>
					<div class="goods-price" v-if="item.show_price == 1"
						 :style="{'color': item.priceColor}">￥ {{ item2.price }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "goods",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				goodsList: []
			}
		},
		mounted() {
			this.getGoodList(this.item)
		},
		methods: {
			// 获取商品数据
			async getGoodList(row) {
				let res = await this.$api.home.getGoodList.get({
					num: row.num,
					cate_id: row.cate_id,
					sortType: row.sortType
				});
				this.goodsList = res.data
			},
			// 普通商品详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style>
</style>